import Vue from 'vue'
import Vuex from 'vuex'
import { instance } from '@/utils/http'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: { // 定义多组件之间的共享状态
    isTabbarShow: true,
    cinemaList: []
  },
  getters: { // 根据vuex的state的变化而变化，就会用到getters，就是vuex的计算属性
    getCinemaFive: state => {
      return params => {
        return state.cinemaList.slice(0, params)
      }
    }
  },
  actions: { // 实现异步请求的，然后更改state共享状态
    async getCinemaListAsync(context) {
      const res = await instance.get('/gateway?cityId=310100&ticketFlag=1&k=4164003', {
        headers: {
          'X-Host': 'mall.film-ticket.cinema.list'
        }
      })
      // 需要触发mutations的setCinemaList，将异步获取的影院数据传递过去
      context.commit('setCinemaList', res.data.data.cinemas)
    }
  },
  mutations: { // 唯一更改state的地方，里面写很多方法，同步的去更改state
    setCinemaList(state, cinemaList) {
      state.cinemaList = cinemaList
    },
    show(state) {
      state.isTabbarShow = true
    },
    hide(state) {
      state.isTabbarShow = false
    }
  }
})
export default store
